<template>
  <a-modal
    :open="open"
    :width="800"
    title="退费"
    centered
    :closable="false"
    ok-text="确定"
    :ok-button-props="{ disabled: disabledState }"
    @ok="onOk"
    @cancel="onCancel"
  >
    <a-form :model="formState" class="cost-form-style pb-4" :label-col="{ style: { width: '100px' } }">
      <a-form-item label="本次应退" class="net-receipts">
        <div class="mt-2 text-blue-500">
          <span>￥</span>
          <span class="pl-1">{{ formatAmount(registerPrice) }}</span>
        </div>
      </a-form-item>
      <p v-if="chargeTitle" class="in-title ml-7">
        <span>{{ chargeTitle }}</span>
      </p>
      <a-divider class="!mb-6" />
      <div class="flex flex-wrap mt-6">
        <a-form-item v-for="item in chargeTypeList" :key="item.id" :label="item.zffsmc" class="w-1/2">
          <a-input-group class="!flex">
            <a-input
              :key="item.zffsdm"
              v-model:value="formState[item.zffsdm]"
              size="large"
              placeholder="0.00"
              @blur="handlerBlur(item.zffsdm)"
              @change="handlerChangePrice(item.zffsdm)"
            >
              <template #prefix> <span class="text-gray-400">￥</span> </template>
            </a-input>
            <a-button class="!w-10 !rounded-l-none border-l-0" size="large" @click="onclickAllPrice(item)">
              <template #icon><ArrowLeftOutlined class="text-gray-400 text-xs" /></template>
            </a-button>
          </a-input-group>
        </a-form-item>
      </div>
      <a-divider />
    </a-form>
  </a-modal>
</template>
<script setup>
import { ref, watch } from 'vue'
import { ArrowLeftOutlined } from '@ant-design/icons-vue'
import { omitBy } from 'lodash-es'
import { message } from 'ant-design-vue'
import { formatAmount } from '@/utils/format.js'
import { post } from '@/utils/request'

const emit = defineEmits(['update:open', 'success'])
const props = defineProps({
  open: Boolean,
  registerPrice: {
    type: Number,
    default: () => 0
  },
  chargeTitle: {
    type: String,
    default: ''
  }
})
const formPrice = ref(0)
const chargeTypeList = ref([])
const formState = ref({})
const paymentAmount = ref({})
const priceTotal = ref(0)
const disabledState = ref(true)

const handlerChangePrice = (zffsdm = '') => {
  priceTotal.value = 0
  formState.value[zffsdm] = formState.value[zffsdm].replace(/[^\d.]/g, '')
  for (const key in formState.value) {
    if (key !== '') {
      priceTotal.value = +formState.value[key] + priceTotal.value
    }
  }
  if (priceTotal.value > +formPrice.value) {
    message.error('退费累计金额不可大于应退金额')
    formState.value[zffsdm] = null
    return
  }

  if (Number(formatAmount(priceTotal.value)) === Number(formPrice.value)) {
    disabledState.value = false
  } else {
    disabledState.value = true
  }
}

const handlerBlur = (zffsdm = '') => {
  if (zffsdm !== '') {
    formState.value[zffsdm] = formState.value[zffsdm] ? formatAmount(formState.value[zffsdm]) : ''
  }
}
const onclickAllPrice = (item) => {
  formState.value = {}
  formState.value = { [item.zffsdm]: formatAmount(formPrice.value) }
  disabledState.value = false
}
const onRest = () => {
  formState.value = {}
  chargeTypeList.value.forEach((item) => {
    paymentAmount.value[item.zffsdm] = 0
  })
}

const getChargeTypeList = async () => {
  const { code, data } = await post('/outp/oupCharge/getChargeTypeList')
  if (code !== 0) return
  data.forEach((item) => {
    paymentAmount.value[item.zffsdm] = 0
  })
  chargeTypeList.value = data
}

const onOk = async () => {
  Object.keys(formState.value).forEach((i) => {
    Object.keys(paymentAmount.value).forEach((j) => {
      if (i === j) {
        paymentAmount.value[j] = formState.value[i]
      }
    })
  })
  // 退费总数为负数，把输入框里的正数改为负数
  if (props.registerPrice < 0) {
    Object.keys(paymentAmount.value).forEach((i) => {
      if (paymentAmount.value[i] > 0) {
        paymentAmount.value[i] = formatAmount(-paymentAmount.value[i])
      }
    })
  }
  const params = {
    ...paymentAmount.value,
    tkje: formatAmount(props.registerPrice)
  }
  const result = omitBy(params, (val) => val === null)
  emit('success', result)
}

watch(
  () => props.open,
  (val) => {
    if (val) {
      getChargeTypeList()
      disabledState.value = true
      formPrice.value = props.registerPrice > 0 ? props.registerPrice : -props.registerPrice
    }
    onRest()
  },
  { immediate: true }
)

const onCancel = () => {
  emit('update:open', false)
}
</script>
<style lang="less" scoped>
.cost-form-style {
  .charge-details {
    color: #8e8b8b;
    font-size: 13px;
  }
  .net-receipts {
    margin-bottom: 0;
    :deep(.ant-form-item-control) {
      text-align: left !important;
    }
    :deep(.ant-form-item-control-input-content) {
      color: red;
      font-weight: 700;
    }
  }
  :deep(.ant-form-item) {
    padding: 0 3px;

    .ant-form-item-label {
      width: 75px;
      padding-top: 4px;
      label {
        color: #5d5d5d;
        font-size: 16px;
      }
    }
    .ant-form-item-control {
      flex: none;
      width: 240px;
      color: #2b2b2b;
      font-size: 15px;
      text-align: right;
      .ant-input {
        text-align: right;
      }
    }
  }
}
.in-title {
  color: #a4adb3;
}
</style>
